<template>
  <view>
    <view v-for="item in orders" :key="item.id" class="order-item">
      <view>订单号：{{ item.id }}</view>
      <view>预定ID：{{ item.bookingId }}</view>
      <view>金额：￥{{ item.amount }}</view>
      <view>状态：{{ statusText(item.status) }}</view>
      <view>下单时间：{{ item.createTime }}</view>
      <view v-if="item.status === 0" style="margin-top:8px;">
        <button size="mini" type="primary" @click="pay(item.id)">支付</button>
        <button size="mini" type="warn" @click="cancel(item.id)">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyOrders, payOrder, cancelOrder } from '../../api/order.js'
export default {
  data() {
    return {
      orders: []
    }
  },
  onShow() {
    getMyOrders().then(result => {
      if (result.code === 200) {
        this.orders = result.data || []
      } else {
        uni.showToast({ title: result.message || '加载失败', icon: 'none' })
      }
    }).catch(err => {
      console.error('加载订单失败:', err)
    })
  },
  methods: {
    statusText(status) {
      return ['未支付', '已支付', '已取消'][status] || '未知'
    },
    pay(id) {
      payOrder(id).then(result => {
        if (result.code === 200) {
          uni.showToast({ title: '支付成功', icon: 'success' })
          this.onShow()
        } else {
          uni.showToast({ title: result.message || '支付失败', icon: 'none' })
        }
      }).catch(err => {
        console.error('支付失败:', err)
      })
    },
    cancel(id) {
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？',
        success: (r) => {
          if (r.confirm) {
            cancelOrder(id).then(result => {
              if (result.code === 200) {
                uni.showToast({ title: '订单已取消', icon: 'success' })
                this.onShow()
              } else {
                uni.showToast({ title: result.message || '取消失败', icon: 'none' })
              }
            }).catch(err => {
              console.error('取消订单失败:', err)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.order-item {
  background: #fff;
  margin: 12px;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px #eee;
  font-size: 15px;
  margin-bottom: 8px;
}
</style> 